<template>
	<view>
		<view class="order_fixed">
			<view class="order_type flex_between">
				<view class="order_item" :class="{'order_ac':type==0}" @click="changeType(0)">全部</view>
				<view class="order_item" :class="{'order_ac':type==1}" @click="changeType(1)">商城</view>
				<view class="order_item" :class="{'order_ac':type==2}" @click="changeType(2)">门店</view>
				<view class="order_item" :class="{'order_ac':type==3}" @click="changeType(3)">团购</view>
				<view class="filter flex_align_center" @click="openfilter">筛选<image src="https://img.jinghushi.com/images/9/2024/11/ENwwv0q5Kyv5qZyk5xiY5rWwllY20n.png"></image></view>
			</view>
			<view class="order_total">
				<view class="flex_between">
					<view class="total_it">
						<view>订单数：</view>
						<view class="total_num">{{info.total}}</view>
					</view>
					<view class="total_it">
						<view>交易额：</view>
						<view class="total_num">{{info.price}}</view>
					</view>
				</view>
				<view class="flex_between">
					<view class="total_it">
						<view>现金付：</view>
						<view class="total_num">{{info.money}}</view>
					</view>
					<view class="total_it">
						<view>米券付：</view>
						<view class="total_num">{{info.micredit}}</view>
					</view>
				</view>
				<view class="flex_between">
					<view class="total_it">
						<view>让利额：</view>
						<view class="total_num">{{info.profit}}</view>
					</view>
					<!-- <view class="total_it">
						<view>毛利额：</view>
						<view class="total_num">2169.52</view>
					</view> -->
				</view>
				<!-- <view class="flex_between">
					<view class="total_it">
						<view>公司利润：</view>
						<view class="total_num">2169.52</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="order_list">
			<view class="or_item" v-for="item in list">
				<view class="flex_between">
					<view class="order_tip flex_align_center" style="font-size: 26rpx;">订单号：{{item.ordersn}}<image src="/static/copy.png" style="width: 30rpx;height: 30rpx;" @click="copy(item.ordersn)"></image></view>
					<view class="or_type" v-if="item.ordersn.search('SH')!=-1">商城</view>
					<view class="or_type" :class="{'or_type_md':item.ordersn.search('ZZ')!=-1}" v-if="item.ordersn.search('ZZ')!=-1">门店</view>
					<view class="or_type" :class="{'or_type_tg':item.ordersn.search('TG')!=-1}" v-if="item.ordersn.search('TG')!=-1">团购</view>
				</view>
				<!-- <view class="flex_box"> -->
					<!-- <view class="order_logo"><image src="/static/price.png"></image></view> -->
					<view class="clamp">{{item.title}}</view>
					<view class="order_tip order_im">订单金额：￥{{item.price}}</view>
					<view class="order_tip">现金支付：￥{{item.money}}</view>
					<view class="order_tip">米券支付：{{item.micredit}}</view>
					<view class="order_tip order_im">让利额：￥{{item.profit}}</view>
					<!-- <view class="order_info"></view> -->
				<!-- </view> -->
				<view class="flex_align_center">
					<view class="order_tip">成本：￥{{item.buyprice}}</view>
					<view class="order_tip">整单利润：￥{{item.profit}}</view>
				</view>
				<view class="flex_align_center">
					<view class="order_tip">分佣额：￥{{item.bonusmoney}}</view>
					<view class="order_tip">公司利润：￥{{item.comney}}</view>
				</view>
				<view class="order_tip clamp">下单人：{{item.nickname}}</view>
				<view class="order_tip">支付时间：{{item.paytime}}</view>
				<view class="order_tip or_wl" @click="searchDetail(item.id)" v-if="!show&&item.ordersn.search('SH')!=-1">展开物流 ></view>
				<view class="order_tip or_wl" v-if="show&&item.ordersn.search('SH')!=-1">收起物流 ></view>
				<view class="order_tip" v-if="item.finishtime!=''">收货时间：{{item.finishtime}}</view>
			</view>
		</view>
		<view class="empty_loading">
			<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
			<text v-show="isempty">没有更多了~</text>
		</view>
		<uni-popup ref="filter_popup" background-color="#fff" type="bottom">
			<view class="filter_con">
				<view class="fil_tit">关键词搜索：</view>
				<uni-search-bar radius="30" bgColor="#f8f8fe" v-model="keywords" placeholder="订单号/下单人手机号/收货人手机号/ID" clearButton="auto" cancelButton="none"/>
				<view class="fil_tit">日期选择：</view>
				<uni-datetime-picker v-model="beginlineup" type="daterange" @change="changeTime($event)"/>
				<view class="flex_between">
					<view class="fil_btn fil_reset" @click="sure('reset')">重置</view>
					<view class="fil_btn fil_sure" @click="sure('sure')">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="wuliu_pop" background-color="#fff" type="center"> -->
			<cc-defineStep v-show="show" :colors="colors" :stepData="stepData"></cc-defineStep>
		<!-- </uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				begin: '',
				end: '',
				keywords: '',
				page: 0,
				list: [],
				isloading: false,
				isempty: true,
				stepData: [],
				colors:"#9532E4",
				show:false,
				info: [],
				// show: false,
			}
		},
		onLoad() {
			this.getList();
			this.getInfo();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			changeType(id){
				if(id == this.type) return;
				this.type = id;
				this.page = 0;
				this.list = [];
				this.getList();
				this.getInfo();
			},
			copy(val){
				uni.setClipboardData({
					data: val
				})
			},
			openfilter(){
				this.$refs.filter_popup.open()
			},
			changeTime(e){
				if(e[0]){
					this.begin = e[0];
					this.end = e[1];
				}else{
					this.begin = '';
					this.end = '';
				}
			},
			sure(type){
				if(type=='reset'){
					this.begin = '';
					this.end = '';
					this.type = 0;
					this.keywords = '';
				}
				this.page = 0;
				this.list = [];
				this.getList();
				this.getInfo();
				this.$refs.filter_popup.close()
			},
			getList(){
				this.page++;
				this.isloading = true;
				this.isempty = false;
				this.$axios('order/lists','POST','member',{
					keywords: this.keywords,
					type: this.type,
					begin: this.begin,
					end: this.end,
					page: this.page
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.list = [...this.list,...res.data.data.list];
						this.isempty = res.data.data.list.length <= 0;
					}
				})
			},
			getInfo(){
				this.$axios('order/main','POST','member',{
					keywords: this.keywords,
					type: this.type,
					begin: this.begin,
					end: this.end
				}).then(res=>{
					if(res.data.code == 200){
						this.info = res.data.data.info;
					}
				})
			},
			searchDetail(id){
				if(this.show){
					this.show = false;
				}else{
					this.stepData = [];
					this.$axios('tracewaybill/getWaybill', "POST", 'member', {
						orderid: id
					}).then(res => {
						if (res.data.code == 200) {
							this.show = true;
							this.stepData = res.data.data.waybill_token;
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #f8f8fe;
}
.order_fixed{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
}
.order_total{
	background: #FFFFFF;
	color: #333333;
	padding: 20rpx;
	border-bottom-left-radius: 18rpx;
	border-bottom-right-radius: 18rpx;
	.flex_evenly{
		margin-bottom: 30rpx;
	}
	.total_it{
		// text-align: center;
		align-items: center;
		color: #666;
		font-size: 24rpx;
		display: flex;
		width: 50%;
		.total_num{
			color: #333;
			font-size: 32rpx;
		}
	}
}
.order_type{
	background: $bg-color;
	color: #fff;
	padding: 0 20rpx;
	.order_item{
		padding: 14rpx 0;
		text-align: center;
		width: 20%;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.order_ac{
		background: #fff;
		color: $bg-color;
	}
	.filter{
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
}
.order_list{
	margin: 20rpx;
	margin-top: 250rpx;
	// margin-top: 290rpx;
	.or_item{
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		.or_type{
			width: 100rpx;
			background: #8615E1;
			border-radius: 12rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 46rpx;
		}
		.or_type_md{
			background: #e3452c;
		}
		.or_type_tg{
			background: #06803A;
		}
		.order_logo{
			width: 180rpx;
			height: 180rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
		.or_wl{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
		.flex_align_center{
			.order_tip{
				width: 50%;
			}
		}
		.order_info{
			// width: calc(100% - 180rpx);
			// padding-left: 20rpx;
		}
		.order_tip{
			color: #666;
			font-size: 24rpx;
		}
		.order_im{
			color: $bg-color;
		}
	}
}
.filter_con{
		padding: 20rpx;
		.fil_tit{
			margin: 36rpx 0 20rpx;
		}
		.fil_btn{
			width: 48%;
			line-height: 74rpx;
			border-radius: 50rpx;
			text-align: center;
			margin: 60rpx 0;
		}
		.fil_reset{
			background: #F0E1FF;
			color: #333333;
		}
		.fil_sure{
			background: linear-gradient( 90deg, #B92DF1 0%, #8917E2 100%);
			color: #FFFFFF;
		}
	}
</style>
